<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="base.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>注册</title>
		<script src="static/js/common-css.js"></script>
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
		<link rel="stylesheet" href="static/css/login.css">
	</head>
	<body>
		<div class="page login-page">
			<div class="container d-flex align-items-center">
				<div class="form-holder has-shadow">
					<div class="row">
						<!-- Logo & Information Panel-->
						<div class="col-lg-6">
							<div class="info d-flex align-items-center">
								<div class="content">
									<div class="logo">
										<h1>欢迎注册</h1>
									</div>
									<p>个人健康信息管理系统</p>
								</div>
							</div>
						</div>
						<!-- Form Panel    -->
						<div class="col-lg-6 bg-white">
							<div class="form d-flex align-items-center">
								<div class="content">
									<div class="form-group">
										<input id="register-username" class="input-material" type="text" name="registerUsername" placeholder="请输入用户名/姓名">
										<div class="invalid-feedback">
											用户名必须在2~10位之间
										</div>
									</div>
									<div class="form-group">
										<input id="register-password" class="input-material" type="password" name="registerPassword" placeholder="请输入密码">
										<div class="invalid-feedback">
											密码必须在6~10位之间
										</div>
									</div>
									<div class="form-group">
										<input id="register-passwords" class="input-material" type="password" name="registerPasswords" placeholder="确认密码">
										<div class="invalid-feedback">
											两次密码必须相同 且在6~10位之间
										</div>
									</div>
									<div class="form-group">
										<button id="regbtn" type="button" name="registerSubmit" class="btn btn-primary">注册</button>
									</div>
									<small>已有账号?</small><a href="login" class="signup">&nbsp;登录</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- JavaScript files-->
		<script src="static/js/common-js.js"></script>
		<script>
			$(function() {
				/*错误class  form-control is-invalid
				正确class  form-control is-valid*/
				var flagName = false;
				var flagPas = false;
				var flagPass = false;
				/*验证用户名*/
				var name, passWord, passWords;
				$("#register-username").change(function() {
					name = $("#register-username").val();
					if (name.length < 2 || name.length > 10) {
						$("#register-username").removeClass("form-control is-valid")
						$("#register-username").addClass("form-control is-invalid");
						flagName = false;
					} else {
						$("#register-username").removeClass("form-control is-invalid")
						$("#register-username").addClass("form-control is-valid");
						flagName = true;
					}
				})
				/*验证密码*/
				$("#register-password").change(function() {
					passWord = $("#register-password").val();
					if (passWord.length < 6 || passWord.length > 18) {
						$("#register-password").removeClass("form-control is-valid")
						$("#register-password").addClass("form-control is-invalid");
						flagPas = false;
					} else {
						$("#register-password").removeClass("form-control is-invalid")
						$("#register-password").addClass("form-control is-valid");
						flagPas = true;
					}
				})
				/*验证确认密码*/
				$("#register-passwords").change(function() {
					passWords = $("#register-passwords").val();
					if ((passWord != passWords) || (passWords.length < 6 || passWords.length > 18)) {
						$("#register-passwords").removeClass("form-control is-valid")
						$("#register-passwords").addClass("form-control is-invalid");
						flagPass = false;
					} else {
						$("#register-passwords").removeClass("form-control is-invalid")
						$("#register-passwords").addClass("form-control is-valid");
						flagPass = true;
					}
				})

				$("#regbtn").click(function() {
					if (flagName && flagPas && flagPass) {
						$.ajax({
							url: "${baseurl}/user/register",
							type: 'POST',
							data: {
								'userName': name,
								'passWord': passWord,
								'confirmPassWord': passWords
							},
							success: function(data) {
								alert(data.message)
								if (data.result == true) {
									localStorage.setItem("userName", name);
									$("#register-username").val("");
									$("#register-username").removeClass("is-valid");
									$("#register-password").val("");
									$("#register-password").removeClass("is-valid");
									$("#register-passwords").val("");
									$("#register-passwords").removeClass("is-valid");
									window.location.href = 'login';
								}
							}
						});
					} else {
						if (!flagName) {
							$("#register-username").addClass("form-control is-invalid");
						}
						if (!flagPas) {
							$("#register-password").addClass("form-control is-invalid");
						}
						if (!flagPass) {
							$("#register-passwords").addClass("form-control is-invalid");
						}
					}
				})
			})
		</script>
	</body>
</html>
